<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <title>Change Security Question</title>
    </h:head>
    <h:form>
        <f:view beforePhase="#{UserManagedBean.doGetPassword}">
            <h:body>
                <div id="top">
                    <h:graphicImage url="/image/newHeader.jpg"/>
                </div>
                <div id="content">
                    <table>
                        <tr>

                            <td style="vertical-align: top">
                                <p:toolbar style="font-size:80%;height:33px;width:207px"> 
                                    <p:toolbarGroup align="right">
                                        <p:button title="Home" image="ui-icon-home" outcome="index2"/>
                                        <p:button title="Notes" image="ui-icon-note"/>
                                        <p:button title="Mail" outcome="messages" image="ui-icon-mail-closed"/>     
                                        <p:button title="Edit Preferences" image="ui-icon-gear"/>
                                        <p:button title="Help" image="ui-icon-help"/>
                                        <p:button title="Logout" image="ui-icon-close" outcome="index2"/> 
                                    </p:toolbarGroup>
                                </p:toolbar>

                                <p:menu style="width:201px; height:320px; font-family: Tahoma;border-style: double;">  
                                    <p:submenu label="Admin Department">  
                                        <p:menuitem value="Home" url="http://localhost:8080/MerlionERP-war/userManagement/AdminDeptWorkspace.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                    </p:submenu>  
                                </p:menu>
                                <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>

                            </td>
                            <td>
                                <h:graphicImage value="security.jpeg" style="width:35px;height:35px" />
                                <h:outputText value="         "/>
                                <h:outputText value="Change Security Question"  style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                <p:spacer width="100" height="10"/>
                                <p:panel id="panel" style=" font-family: Tahoma;width:1122px; height:482px;">

                                    <h:panelGrid columns="5">
                                        <h:outputText value="Email " />
                                        <h:outputText value=":" />
                                        <h:outputText id="email" value="#{UserManagedBean.email}"/>
                                        <p:message for="email"/>
                                        <p:spacer height="40px"/>

                                        <h:outputText value="Password " />
                                        <h:outputText value=":"/>
                                        <h:inputSecret style="width:250px" validatorMessage="Password must be between 6 to 40 characters" id="p" value="#{UserManagedBean.password}" required="true" requiredMessage="Password is required" >
                                            <f:validateLength minimum="6" maximum="40"/>
                                        </h:inputSecret>
                                        <p:message for="p"/>
                                        <p:spacer height="40px"/>

                                        <h:outputText value="Security Question " />
                                        <h:outputText value=":"/>

                                        <p:inputText style="width:250px" id="sq" value="#{UserManagedBean.securityQuestion}" required="true" requiredMessage="Security Question is required"/>
                                        <p:message for="sq"/>
                                        <p:spacer height="40px"/>

                                        <h:outputText value="Security Answer " />
                                        <h:outputText value=":"/>
                                        <p:inputText style="width:250px" id="sa" value="#{UserManagedBean.securityAnswer}" required="true" requiredMessage="Security Answer is required"/>
                                        <p:message for="sa"/>
                                        <p:spacer height="40px"/>

                                        <p:captcha label="Captcha" theme="white" id="captcha" requiredMessage="Captcha must be filled"/>
                                        <h:outputText value=""/>
                                        <p:message for="captcha"/>
                                        <h:outputText value=""/>
                                        <h:outputText value=""/>
                                        <p:commandButton value="Submit" ajax="false" actionListener="#{UserManagedBean.doChangeSecurity}" /><br/>
                                    </h:panelGrid>
                                </p:panel>
                            </td>
                        </tr>
                    </table>
                </div>

                <div id="footer">
                    <h:graphicImage url="/image/merlionfooter.jpg"/>
                </div>
                <p:ajaxStatus style="width:40px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="../design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>

            </h:body>
        </f:view>
    </h:form>
</html>
